<template>
  <el-tree
    :data="data"
    node-key="id"
    :expand-on-click-node="false"
    :default-expand-all="true"
    :props="{
      label: 'key',
      children: 'additional',
    }"
  >
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <div class="flex-x w100 flex-space">
        <!-- @dragend="dragend(item, li.key)" draggable="true" -->
        <span
          @dragstart="dragend(node, data)"
          v-if="data.draggable"
          draggable="true"
          >{{ data.key }}</span
        >
        <span v-else>{{ data.key || data.text }}</span>
        <div v-if="data.isTitle">
          <el-button type="text" @click="allClick">一键添加</el-button>
        </div>
        <div v-if="!data.isTitle">
          <i
            v-if="data.draggable"
            style="margin-left: 10px"
            class="el-icon-edit"
            @click="editTechnology(node, data)"
          ></i>
          <el-popover
            v-if="!data.isEdit"
            placement="top"
            width="160"
            v-model="data.visible"
            :ref="`popover-${data.id}`"
          >
            <p>确定删除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="data.visible = false"
                >取消</el-button
              >
              <el-button type="primary" size="mini" @click="del(node, data)"
                >确定</el-button
              >
            </div>
            <i
              slot="reference"
              style="margin-left: 10px"
              class="el-icon-delete"
              @click="deleteTechnology(node, data)"
            ></i>
          </el-popover>

          <i
            v-if="data.isEdit"
            class="el-icon-circle-plus-outline"
            style="color: #666666; margin-left: 10px"
            @click.stop="addTechnology(node, data)"
          ></i>
        </div>
      </div>
    </span>
  </el-tree>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    allClick() {
      this.$confirm("是否一键添加?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$emit("allClick");
      });
    },
    del(node, data) {
      data.visible = false;
      this.$emit("deleteTechnology", node.parent.data, data.id);
    },
    deleteTechnology(node, data) {
      // 先隐藏所有的popover
      this.$nextTick(() => {
        for (const key in this.$refs) {
          if (key.indexOf("popover-") !== -1) {
            if (this.$refs[key]) {
              this.$refs[key].doClose();
            }
          }
        }
      });
    },
    editTechnology(node, data) {
      console.log("node :>> ", data);
      this.$emit("editTechnology", data, node.parent.data.name);
    },
    addTechnology(node, data) {
      this.$emit("addTechnology", data);
    },
    // 拖拽
    dragend(node, data) {
      this.$emit("dragend", data, node.parent.data.key);
    },
  },
};
</script>
<style lang="scss" scoped>
.custom-tree-node {
  width: 100%;
}
</style>